<template>
  <el-dialog class="userOrg-choose-dialog" title="分配人员组织"
             :close-on-click-modal="closeOnclickModal" :visible.sync="isDialogShow" width="50%" @close="closeDialog">
    <div class="choose-dialog-content">
      <div class="left">
        <el-form ref="treeSearchForm" :inline="true" :model="treeSearchForm" :size="size">
          <el-form-item prop="keyword">
            <el-input v-model="treeSearchForm.keyword" placeholder="请输入关键词" clearable>
              <el-button slot="append" :size="size" icon="el-icon-search" @click="getCompanyUserTree" />
            </el-input>
          </el-form-item>
        </el-form>
        <el-tree ref="tree" :data="treeList" node-key="uniKey" :props="defaultProps" @check-change="selectChange" :check-strictly="true"
                 :highlight-current="true" show-checkbox>
        </el-tree>
      </div>
      <div class="right">
        <div class="title">已分配的人员或组织</div>
        <ul class="selected">
          <li class="selected-item" v-for="(item, index) in selectedList" :key="index">
            <span>{{item.text}}</span>
            <span class="el-icon-close selected-icon" @click="deleteSelect(index)"></span>
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :size="size" @click="closeDialog">取消</el-button>
      <el-button type="primary" :size="size" @click="choose">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'UserOrgDialogSelect',
    props: {
      isDialogUserOrgShow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        treeSearchForm: {
          parentId: 0,
          keyword: ''
        },
        defaultProps: {
          children: 'childNodes',
          label: 'text',
          isLeaf: 'leaf'
        },
        treeList: [],
        selectedList: [],
        isDialogShow: false,
        uniKeyMap: {} // 树组件唯一key与节点的id对应，因为树中存在相同的id
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal']),
    },
    watch: {
      isDialogUserOrgShow (newValue) {
        this.isDialogShow = newValue
        if (newValue && this.treeSearchForm.keyword.trim()) {
          this.treeSearchForm.keyword = ''
          this.getCompanyUserTree()
        }
      }
    },
    mounted () {
      this.getCompanyUserTree()
    },
    methods: {
      selectChange (data, check) {
        if (check) {
          if (this.selectedList.filter(item => item.id === data.id).length ==0) {
            this.selectedList.push(data)
          }
        } else {
          this.selectedList = this.selectedList.filter(item => item.id !== data.id)
        }
        let checkKeys = []
        this.selectedList.forEach(item => {
          for (let key in this.uniKeyMap) {
            if (this.uniKeyMap[key] === item.id) {
              checkKeys.push(key)
            }
          }
        })
        this.$refs.tree.setCheckedKeys(checkKeys)
      },
      deleteSelect (index) {
        this.selectedList.splice(index, 1)
        this.$refs.tree.setCheckedNodes(this.selectedList)
      },
      closeDialog () {
        this.$emit('update:isDialogUserOrgShow', false)
      },
      // 获取部门+人员树
      getCompanyUserTree () {
        const params = this.treeSearchForm
        api.companysUserTree(params).then(res => {
          this.treeList = res.data
          this.setUniKeyForTree(this.treeList)
        })
      },
      setUniKeyForTree (list) {
        for (let i = 0; i < list.length; i++) {
          let uniKey = `${list[i].parentId}__${list[i].id}`
          this.uniKeyMap[uniKey] = list[i].id
          list[i].uniKey = uniKey
          if (list[i].childNodes && list[i].childNodes.length > 0) {
            this.setUniKeyForTree(list[i].childNodes)
          }
        }
      },
      choose () {
        this.$emit('choose', this.selectedList)
        this.closeDialog()
      },
      setSelectedList (list) {
        this.selectedList = list.slice()
        const uniKeys = []
        for (let key in this.uniKeyMap) {
          this.selectedList.forEach(item => {
            if (item.id === key.split('__')[1]) {
              uniKeys.push(key)
            }
          })
        }
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(uniKeys)
        })
      }
    }
  }
</script>

<style lang="scss">
  .userOrg-choose-dialog {
    .el-dialog {
      min-width: 700px;
    }
    .choose-dialog-content {
      display: flex;
      height: 450px;
      .left {
        width: 290px;
        padding-right: 15px;
        border-right: 1px solid #dedede;
        overflow: auto;
      }

      .right {
        padding: 8px 10px 0 15px;
        flex-grow: 1;
        overflow: auto;
        .selected{
          .selected-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            .selected-icon{
              cursor: pointer;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>
